<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>我的游戏</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Portal - Bootstrap 5 Admin Dashboard Template For Developers">
    <meta name="author" content="Xiaoying Riley at 3rd Wave Media">
    <link rel="shortcut icon" href="favicon.ico">

    <script defer src="/assets/js/jquery-2.1.4.js"></script>
    <!-- FontAwesome JS-->
    <script defer src="/assets/plugins/fontawesome/js/all.min.js"></script>

    <!-- App CSS -->
    <link id="theme-style" rel="stylesheet" href="/assets/css/portal.css">

</head>

<body class="app">
<header th:replace="template.html::header"></header><!--//app-header-->

<div class="app-wrapper">
    <div class="app-content pt-3 p-md-3 p-lg-4">
        <div th:unless="${game != null}" class="container-xl">
            <div class="row g-4 mb-4">
                <div class="col-12 col-lg-12">
                    <div class="app-card app-card-basic d-flex flex-column align-items-start shadow-sm">
                        <div class="app-card-header p-3 border-bottom-0">
                            <div class="row align-items-center gx-3">
                                <div class="col-auto">
                                    <div class="app-icon-holder">
                                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-receipt"
                                             fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd"
                                                  d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z"/>
                                            <path fill-rule="evenodd"
                                                  d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z"/>
                                        </svg>
                                    </div><!--//icon-holder-->

                                </div><!--//col-->
                                <div class="col-auto">
                                    <h4 class="app-card-title">游戏</h4>
                                </div><!--//col-->
                            </div><!--//row-->
                        </div><!--//app-card-header-->
                        <div class="app-card-body px-4">
                            <div class="intro">
                                你还没有创建游戏, 请先在剧本列表里面查看自己喜欢的游戏, 然后在房间列表查询空闲的房间, 最后在此处创建游戏.
                            </div>
                        </div><!--//app-card-body-->
                        <div class="app-card-footer p-4 mt-auto">
                            <a class="btn app-btn-secondary" href="/ms/create-game">创建游戏</a>
                        </div><!--//app-card-footer-->
                    </div><!--//app-card-->
                </div><!--//col-->
            </div><!--//row-->
        </div>
        <div th:if="${game != null}" class="container-xl">
            <h1 class="app-page-title">游戏信息</h1>
            <hr class="mb-4">
            <div class="row g-4 settings-section">
                <div class="col-12 col-md-4">
                    <h3 class="section-title">游戏信息</h3>
                    <div class="section-intro">
                        <img style="max-width: 300px; max-height: 300px" th:src="${script.getFace()}" alt="无法展示">
                    </div>
                </div>
                <div class="col-12 col-md-8">
                    <div class="app-card app-card-settings shadow-sm p-4">
                        <div class="app-card-body">
                            <div class="settings-form">
                                <input style="display: none" id="uid" th:value="${game.getUid()}">
                                <input style="display: none" id="gid" th:value="${game.getGid()}">
                                <div class="mb-3">
                                    <label for="sid" class="form-label">剧本号</label>
                                    <div class="form-control" id="sid" th:text="${script.getSid()}"></div>
                                </div>
                                <div class="mb-3">
                                    <label for="name" class="form-label">剧本名
                                    </label>
                                    <div class="form-control" id="name" th:text="${script.getName()}"></div>
                                </div>
                                <div class="mb-3">
                                    <label for="hid" class="form-label">房间号</label>
                                    <div class="form-control" id="hid" th:text="${house.getHid()}"></div>
                                </div>
                                <div class=" mb-3">
                                    <label class="form-label" for="start">开始时间</label>
                                    <div id="start" class="form-control"
                                         th:text="${#dates.format(game.getStart(), 'yyyy-MM-dd HH:mm:ss')}"></div>
                                </div><!--//form-group-->
                                <div th:if="${end}" class=" mb-3">
                                    <label class="form-label" for="end">结束时间</label>
                                    <div id="end" class="form-control"
                                         th:text="${#dates.format(end, 'yyyy-MM-dd HH:mm:ss')}"></div>
                                </div><!--//form-group-->
                                <button th:if="${user.getUid() == game.getUid()}" onclick="deleteGame()"
                                        class="btn app-btn-secondary">结束游戏
                                </button>
                                <button th:if="${user.getUid() != game.getUid()}"
                                        th:onclick="'goOut(' + ${user.getUid()} +')'"
                                        class="btn app-btn-secondary">退出游戏
                                </button>
                            </div>
                        </div><!--//app-card-body-->
                    </div><!--//app-card-->
                </div>
            </div><!--//row-->
            <hr class="mb-4">
            <div class="row g-4 settings-section">
                <div class="col-12 col-md-4">
                    <h3 class="section-title">当前玩家</h3>
                    <div class="section-intro">
                        查看参与游戏的玩家
                    </div>
                    <div class="section-intro"
                         th:text="'人数: ' + ${game.getPeople()} + ' / ' + ${script.getPeople()} +'人'">
                    </div>
                    <div th:if="${user.getUid() == game.getUid() && game.getPeople() < script.getPeople()}"
                         class="section-intro">
                        <a class="btn app-btn-primary" onclick="searchPlayer()">邀请用户</a>
                    </div>
                </div>
                <div class="col-12 col-md-8">
                    <div class="app-card app-card-settings shadow-sm p-4">
                        <div class="row g-4 settings-section">
                            <div th:each="player : ${players}" class="col-6 col-md-4 col-xl-3 col-xxl-2">
                                <div class="app-card app-card-doc shadow-sm h-100">
                                    <div class="app-card-thumb-holder p-3">
                                        <div class="app-card-thumb">
                                            <img class="thumb-image thumb-image-custom" th:src="${player.getFace()}"
                                                 alt="">
                                        </div>
                                        <span th:if="${player.getUid() == game.getUid()}"
                                              class="badge bg-danger">房主</span>
                                    </div>
                                    <div class="app-card-body p-3 has-card-actions">
                                        <h4 class="app-doc-title truncate mb-0">
                                            <a th:text="${player.getName()}"></a>
                                        </h4>
                                        <div class="app-doc-meta">
                                            <ul class="list-unstyled mb-0">
                                                <li th:text="'账号: ' + ${player.getAccount()}"></li>
                                            </ul>
                                        </div><!--//app-doc-meta-->
                                        <div th:if="${user.getUid() == game.getUid() && player.getUid() != game.getUid()}"
                                             class="app-card-actions">
                                            <div class="dropdown">
                                                <div class="dropdown-toggle no-toggle-arrow" data-bs-toggle="dropdown"
                                                     aria-expanded="false">
                                                    <svg width="1em" height="1em" viewBox="0 0 16 16"
                                                         class="bi bi-three-dots-vertical" fill="currentColor"
                                                         xmlns="http://www.w3.org/2000/svg">
                                                        <path fill-rule="evenodd"
                                                              d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                                                    </svg>
                                                </div><!--//dropdown-toggle-->
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <a class="dropdown-item"
                                                           style="cursor: pointer"
                                                           th:onclick="'kickParticipant(' + ${player.getUid()} + ')'">
                                                            <svg width="1em" height="1em" viewBox="0 0 16 16"
                                                                 class="bi bi-trash me-2"
                                                                 fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                                                                <path fill-rule="evenodd"
                                                                      d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                                                            </svg>
                                                            踢出
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div><!--//dropdown-->
                                        </div><!--//app-card-actions-->
                                    </div><!--//app-card-body-->
                                </div><!--//app-card-->
                            </div><!--//col-->
                        </div><!--//row-->
                    </div><!--//app-card-->
                </div>
            </div>
        </div><!--//container-fluid-->
    </div><!--//app-content-->
</div><!--//app-wrapper-->
<div th:if="${game != null}" id="players" class="container-xl container-custom" style="display: none">
    <div class="row g-3 mb-4 align-items-center justify-content-between">
        <div class="col-auto">
            <h1 class="app-page-title mb-0">请邀请用户</h1>
        </div>
        <div class="col-auto">
            <div class="page-utilities">
                <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
                    <div class="col-auto">
                        <div class="docs-search-form row gx-1 align-items-center">
                            <div class="col-auto">
                                <input type="text" id="search" name="keyword"
                                       class="form-control search-docs" placeholder="输入账号或用户名">
                            </div>
                            <div class="col-auto">
                                <button onclick="searchPlayer()" class="btn app-btn-secondary">搜索
                                </button>
                            </div>
                        </div>
                    </div><!--//col-->
                </div><!--//row-->
            </div><!--//table-utilities-->
        </div><!--//col-auto-->
        <div class="col-auto">
            <button onclick="closePanel()" class="btn app-btn-secondary">关闭</button>
        </div>
    </div><!--//row-->

    <div class="row g-4" id="list"></div><!--//row-->

    <nav class="app-pagination mt-5">
        <ul class="pagination justify-content-center" id="pager"></ul>
    </nav><!--//app-pagination-->
</div><!--//container-fluid-->

<div th:if="${game != null}" id="template" class="col-6 col-md-4 col-xl-3 col-xxl-2" style="display: none">
    <div class="app-card app-card-doc shadow-sm h-100">
        <div class="app-card-thumb-holder p-3">
            <div class="app-card-thumb">
                <img class="thumb-image" alt="">
            </div>
            <a class="app-card-link-mask"></a>
        </div>
        <div class="app-card-body p-3 has-card-actions">
            <h4 class="app-doc-title truncate mb-0">
                <a style="cursor: pointer"></a>
            </h4>
            <div class="app-doc-meta">
                <ul class="list-unstyled mb-0">
                    <li></li>
                </ul>
            </div><!--//app-doc-meta-->
        </div><!--//app-card-body-->
    </div><!--//app-card-->
</div><!--//col-->
<!-- Javascript -->
<script src="/assets/plugins/popper.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.min.js"></script>

<!-- Page Specific JS -->
<script src="/assets/js/app.js"></script>
<script type="text/javascript">
    function deleteGame() {
        $.ajax({
            url: '/ms/api/game/user?uid=' + parseInt(document.getElementById('uid').value),
            method: 'delete',
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                if (result['success']) location.reload()
                else alert('删除失败')
            }
        })
    }

    function kickParticipant(uid) {
        $.ajax({
            url: '/ms/api/participant/user?uid=' + uid,
            method: 'delete',
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                if (result['success']) location.reload()
                else alert('无法踢出该用户')
            }
        })
    }

    function goOut(uid) {
        $.ajax({
            url: '/ms/api/participant/user?uid=' + uid,
            method: 'delete',
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                if (result['success']) location.reload()
                else alert('退出失败')
            }
        })
    }

    document.getElementById('players').onclick = function (event) {
        var target = event.target;
        if (target !== null && target.id === 'players')
            closePanel()
    }

    let set = new Set()
    window.addEventListener('load', () => {
        $.ajax({
            url: '/ms/api/participants/game?gid=' + parseInt(document.getElementById('gid').value),
            method: 'get',
            dateType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (participants) {
                console.log(participants)
                if (participants === null) return
                for (var i in participants) set.add(participants[i]['uid'])
            }
        })
    })

    function searchPlayer() {
        document.getElementById('players').style.display = ''
        var list = document.getElementById('list')
        list.innerHTML = ''
        var key = document.getElementById('search').value
        $.ajax({
            url: '/ms/api/onlines',
            method: 'get',
            dateType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (onlines) {
                if (onlines === null) return
                var temp = document.getElementById('template')
                for (let i in onlines) {
                    if (set.has(onlines[i]['uid'])) continue
                    if (onlines[i]['name'].includes(key) || onlines[i]['account'] === key) {
                        var copy = temp.cloneNode(true)
                        copy.children[0].children[0].children[0].children[0].src = onlines[i]['face']
                        copy.children[0].children[0].children[1].onclick = () => choose(onlines[i]['uid'])
                        copy.children[0].children[1].children[0].children[0].innerText = onlines[i]['name']
                        copy.children[0].children[1].children[1].children[0].children[0].innerText = '账号: ' + onlines[i]['account']
                        copy.style.display = ''
                        copy.id = 'player-' + onlines[i]['uid']
                        list.append(copy)
                    }
                }
            }
        })
    }

    function closePanel() {
        document.getElementById('players').style.display = 'none'
    }

    function choose(uid) {
        var participant = {}
        participant['uid'] = uid
        participant['gid'] = parseInt(document.getElementById('gid').value)
        $.ajax({
            url: '/ms/api/participant',
            method: 'post',
            data: JSON.stringify(participant),
            dateType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                if (!result['success']) alert('邀请失败, 可能人数已满')
                location.reload()
            }
        })
    }

    let response = 0
    setInterval(() => {
        $.ajax({
            url: '/ms/api/game/exist?gid=' + parseInt(document.getElementById('gid').value),
            method: 'get',
            dateType: 'json',
            contentType: 'application/json;charset=utf-8',
            sync: false,
            success: function (result) {
                if (!result['success']) {
                    if (response++ !== 1) return
                    alert('时间到, 游戏结束')
                    location.reload()
                }
            }
        })
    }, 1000)
</script>
</body>
</html>
